
<template>
<div>
<!--
 <div v-for="(item,index) in person">{{item}}</div>
-->
  <button @click="change1">test1</button>
  <button @click="change2">test2</button>

</div>
</template>

<script setup lang="ts">
import {reactive,shallowReactive,readonly} from 'vue'
// reactive用来绑定复杂数据类型
// let person = reactive({
//    name:'邓紫棋'
// })
// person.name="周杰伦"
// console.log(person)

// 数组异步赋值问题
// 这样赋值页面时不会变化的因为会脱离响应式
// let person =reactive<number[]>([])
// setTimeout(()=>{
//   const person =[1,2,3,4]
//   console.log(person);
// },500)
// 解决方案一
// let person =reactive<number[]>([])
// setTimeout(()=>{
//   const lists =[1,2,3,4]
//   person.push(...lists)
//   console.log(person);
// },500)

// readonly: 拷贝一份proxy对象将其设置为只读
//  const person = reactive{count:1}
//  const copy = readonly(person)
//  console.log(copy)

 // shallowReactive:只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图


 
const obj = {
  a: 1,
  first: {
    b: 2,
    second: {
      c: 3
    }
  }
}
 
const state = shallowReactive(obj)
 
function change1() {
  state.a = 7
}
function change2() {
  state.first.b = 8
  state.first.second.c = 9
  console.log(state);
}
 





</script>


<style>

</style>
